<!DOCTYPE html>
<html lang="en">
<html xmlns:th="http://www.thymeleaf.org">

<head>
    <meta charset="UTF-8">
    <title>商品列表页面</title>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <base href="/"/>
    <!-- Bootstrap -->
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css" rel="stylesheet">
    <link href="./css/signin.css" rel="stylesheet"/>
</head>
<body>
<!--    商品列表页面-->
    <div class="container-fluid">
<!--        上面的按钮-->
        <div class="row">
            <div class="col-md-4 col-md-offset-8">
                <button type="button" class="btn btn-primary" id="add-btn" data-toggle="modal" data-target="#product-add">添加</button>
                <button type="button" class="btn btn-danger btn sm">批量删除</button>

            </div>

        </div>
        <div class="row">

            <div class="col-md-12">
                <table class="table table-hover">
                    <tr>
                        <td>ID</td>
                        <td>商品类别</td>
                        <td>商品名称</td>
                        <td>商品价格</td>
                        <td>商品卖点</td>
                        <td>商品图片</td>
                        <td>操作</td>
                    </tr>

                    <tr th:each="order : ${list}">
                        <td th:text="${order.id}">ID</td>
                        <td th:text="${order.orderId}" >商品编号</td>
                        <td th:text="${order.orderName}">商品名称</td>
                        <td th:text="${order.price}">商品价格</td>
                        <td th:text="${order.orderNo}">商品卖点</td>
                        <td>
<!--                            <img src="file://C:/Users/Admin/Desktop/Private/fly/fly-game/bg"/>-->
                                <img src="/images/shop_cart.png"/>

                        <td>
<!--                            提供一个详情连接-->
                            <button type="button" class="btn btn-primary btn sm">修改</button>
                            <button type="button" class="btn btn-danger btn sm">删除</button>

                        </td>
                    </tr>
                </table>
            </div>
        </div>

        <div class="row">
            <div class="col-md-6">
                当前第几页，总共有多少条记录，共多少页
            </div>

        </div>

        <div class="row">
            <div class="col-md-6">
                <nav aria-label="Page navigation">
                    <ul class="pagination">
                        <li>
                            <a href="#" aria-label="Previous">
                                <span aria-hidden="true">&laquo;</span>
                            </a>
                        </li>
                        <li class="active"><a href="#">1</a></li>
                        <li><a href="#">2</a></li>
                        <li><a href="#">3</a></li>
                        <li><a href="#">4</a></li>
                        <li><a href="#">5</a></li>
                        <li>
                            <a href="#" aria-label="Next">
                                <span aria-hidden="true">&raquo;</span>
                            </a>
                        </li>
                    </ul>
                </nav>
            </div>

        </div>
    </div>

<!--modal content 根据id 来取用并触发-->
<div class="modal fade" id="product-add" tabindex="-1">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                <h4 class="modal-title" id="myModalLabel">Modal title</h4>
            </div>
            <div class="modal-body">
                添加商品
                <form class="form-horizontal" enctype="multipart/form-data" method="post" action="html/product/add" id="add-form">
                    <div class="form-group">
                        <div class="col-sm-10">
                            <label for="name">商品名称:</label>

                            <input type="text" class="form-control" id="name" name="name" placeholder="userName">
                        </div>
                    </div>

                    <div class="form-group">
                        <div class="col-sm-10">
                            <label for="typeId">商品类别:</label>

                            <input type="text" class="form-control" id="typeId" name="typeId" placeholder="Email">
                        </div>
                    </div>

                    <div class="form-group">
                        <div class="col-sm-10">
                            <label for="imagesFile">商品头像:</label>

                            <input type="file" id="imagesFile" name="imagesFile">
                        </div>
                    </div>
                    <div class="checkbox">
                        <label>
                            <input type="checkbox"> Check me out
                        </label>
                    </div>
                </form>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">取消</button>
                <button type="button" class="btn btn-primary" id="save">保存</button>
            </div>
        </div>
    </div>
</div>

    <!-- jQuery (Bootstrap 的所有 JavaScript 插件都依赖 jQuery，所以必须放在前边) -->
    <script src="https://cdn.jsdelivr.net/npm/jquery@1.12.4/dist/jquery.min.js"></script>
    <!-- 加载 Bootstrap 的所有 JavaScript 插件。你也可以根据需要只加载单个插件。 -->
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/js/bootstrap.min.js"></script>

<script type="text/javascript">
    $(function () {
        //为按钮绑定事件
        $("#add-btn").click(function () {
            $("#product-add").model({
                backdrop : 'static',
                keyboard : true
            });
            
        })

        $("#save").click(function () {
            $("#add-form").submit();
        })
    })
</script>

</body>
</html>